<template>
  <!-- 选择歌手首位字母组件 -->
  <div class="letters">
    <div
      class="letter"
      v-for="item in letters"
      :key="item"
      :class="currentLetter == item ? 'active' : ''"
      @click="choiceLetterClick(item)"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "ChoiceLetter",
  setup(props, context) {
    let data = reactive({
      letters: [
        "热门",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
        "其他",
      ],
      currentLetter: "热门",
    });

    // 选择字母事件
    let choiceLetterClick = (letter) => {
      if(data.currentLetter == letter){
        return
      }
      data.currentLetter = letter;
      context.emit("choiceLetterClick", letter);
    };
    return {
      ...toRefs(data),
      choiceLetterClick,
    };
  },
});
</script>
<style scoped>
.letters {
  width: 100%;
  padding: 0 20px;
  padding-top: 10px;
  display: flex;
  align-items: center;
}
.letter {
  color: #555;
  font-size: 18px;
  margin: 0 10px;
  cursor: pointer;
}
.letter:hover {
  text-decoration: underline;
}
.active {
  color: #e60026;
}
</style>
